<template>
  <div>
    <Modal
      width="300"
      v-model="del.modal"
      title="确认框"
      @on-ok="handleDelOk">
      <p>确认删除该记录？</p>
    </Modal>

    <Modal
        v-model="info.modal"
        title="图片详情"
        >
        <p>{{info.image.url}}</p>

    </Modal>

    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item>图片列表</Breadcrumb-item>
    </Breadcrumb>

    <div class="div-search">
      <Form ref="formInline" inline :label-width="60">
        <Form-item label="企业" prop="company">
          <Input type="text" placeholder="企业名称" v-model="search.company" style="width: 160px;"/>
        </Form-item>

        <Form-item label="工位名称" prop="station">
          <Input type="text" placeholder="工位名称" v-model="search.station" style="width: 160px;"/>
        </Form-item>

        <Form-item label="工位号" prop="num">
          <Input type="text" placeholder="工位号" v-model="search.num" style="width: 100px;"/>
        </Form-item>

        <Form-item label="日期" prop="start_time">
          <DatePicker type="date" placeholder="开始日期" v-model="start_time" class="datetime"></DatePicker>
          <span> - </span>
          <DatePicker type="date" placeholder="截止日期" v-model="stop_time" class="datetime"></DatePicker>
        </Form-item>

        <Form-item>
          <Button type="primary" @click="handleSearch">查询</Button>
        </Form-item>
      </Form>
    </div>

    <div class="div-result">
      <div v-for="item in images.images.items" :key="item.id">
        <img class="image" :src="getFullUrl(item.url)" @click="onClickImage(item)"/>
      </div>
    </div>

    <div class="div-page">
      <Page :total="images.images.total" show-elevator show-total @on-change="handlePageChange"></Page>
    </div>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import Config from '@/config'
  import List, { ListHeader, ListOperations, ListSearch } from '@/components/List'
  import Util from '@/service/util'

  export default {
    name: 'imageList',
    components: {
      List,
      ListHeader,
      ListOperations,
      ListSearch
    },
    data () {
      return {
        info: {
          modal: false,
          image: {}
        },
        del: {
          modal: false,
          id: 0
        },
        start_time: null,
        stop_time: null,
        search: {
          company: '',
          station: '',
          num: '',
          start_time: null,
          stop_time: null,
          name: ''
        },
        current: 1
      }
    },
    computed: {
      ...mapState(['images'])
    },
    created () {
      this.get()
    },
    methods: {
      get (current = 1) {
        this.$set(this, 'current', current)

        this.search.start_time = this.getSeconds(this.start_time)
        this.search.stop_time = this.getSeconds(this.stop_time)

        this.$store.dispatch('getImages', {
          offset: (current - 1) * Config.PAGE_SIZE,
          limit: Config.PAGE_SIZE,
          ...this.search
        })
      },
      handlePageChange (current) {
        this.get(current)
      },
      handleSearch () {
        this.get()
        this.$set(this, 'current', 1)
      },
      getSeconds (t) {
        if (!t) {
          return t
        }
        return t.getTime() / 1000
      },
      getFullUrl (url) {
        return Config.BASE_URL + url
      },
      getTimeText (seconds) {
        return Util.getTimeText(seconds)
      },
      handleView (image) {
        this.info.image = image
        this.info.modal = true
      },
      handleEdit (image) {
        this.$router.push(`/images/form/${image.id}`)
      },
      handleDel (image) {
        this.del.modal = true
        this.del.id = image.id
      },
      handleDelOk () {
        this.$store.dispatch('deleteImage', {id: this.del.id}).then(() => {
          this.$Message.success('删除成功！')
          this.get()
        })
      },
      onClickImage (image) {
        // this.handleView(image)
        this.$router.push(`/imageview/${image.id}`)
      }
    }
  }
</script>

<style scoped>

.datetime {
  width: 120px;
}

.ivu-form-item {
  margin-bottom: 8px;
}

.div-search {
  border-bottom: 1px solid #DEDEDE;
}

.div-result {
  margin-top: 16px;
  margin-bottom: 16px;
}

.div-page {
  clear: both;
}

.image {
  width: 200px;
  height: 150px;
  float: left;
  margin-right: 8px;
  margin-bottom: 16px;
}


</style>
